
import React from 'react';
import './init.scss';
import './main.scss';
import { api } from 'js/api/base';
import { userData } from 'js/core/userData';

class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            ready: false
        }
    }
    componentDidMount() {
        api('userLogin', { username: '123' }, (err, userLoginData) => {
            if (err === 0) {
                userData.set('sid', userLoginData.sid);
                userData.set('username', userLoginData.username);
                api('getPlayerList', (err, playerListData) => {
                    if (err === 0) {
                        if (playerListData.length > 0) {
                            api('selectPlayer', { id: playerListData[0]._id }, (err, playerData) => {
                                if (err === 0) {
                                    userData.set('player', playerData);
                                    api('getErrMap', (err, errMapData) => {
                                        window.errMap = errMapData;
                                        api('getPropName', (err, propNameData) => {
                                            window.propName = propNameData;
                                            api('getTotalConfig', (err, totalConfigData) => {
                                                window.totalConfig = totalConfigData;
                                                this.setState({ ready: true })
                                            })
                                        });
                                    });
                                }
                            });
                        }
                    }
                });
            }
        });
    }
    render() {
        let node, headNode, footer;
        if (this.state.ready) {
            node = [<div className="header" key={1}>
                <div className="bg"></div>
                <div className="flex">
                    <div className="hour">1时</div>
                    <div className="time">凌晨</div>
                    <div className="flex-col-2">雨天</div>
                    <div className="flex-g-1 title" onClick={this.getMapInfo}>黑涩深林</div>
                </div>
            </div>,
            <div className="mainContent" key={2}>
                {this.props.children}
            </div>,
            <div className="log flex-g-1" ref={(r) => { this.refLog = r }} key={3}>
                <div className="logTitle" onClick={this.setLogHeight}>探险日记</div>
                <div className="logContent"></div>
            </div>,
            <div className="footer" key={4}>
                <div className="bg"></div>
                <div className="flex footerItemList">
                    <div className="item" onClick={this.showBag}>背包</div>
                    <div className="item">本人</div>
                    <div className="item" onClick={this.save}>保存</div>
                    <div className="item" onClick={this.showBattle}>制作</div>
                    <div className="item">科技</div>
                    <div className="item">奇遇</div>
                    <div className="item">探索手册</div>
                    <div className="item">探索成就</div>
                </div>
            </div>]
        }
        return (
            <div id="main" className="flex-col">
                {node}
            </div>
        );
    }
}

export default Main;